<template>
	<view>
		<view class="head">
			<image src="../../../static/images/arrow_left.png" mode=""></image>
			<view class="">店铺</view>
			<view class="f32" @click="more">更多</view>
			<!-- 更多 -->
			<view class="more" v-show="ShowMore">
				<view class="moreLeft" @click="Go">
					<image src="../../../static/shopImage/j.png" mode=""></image>
					分享店铺
				</view>
				<view class="moreLeft">
					<image src="../../../static/shopImage/q.png" mode=""></image>
					店铺二维码
				</view>
			</view>
		</view>
		<view class="seach">
			<image src="../../../static/shopImage/222.png" mode="" @click="showLan"></image>
			<view class="seach-e">
				<image src="../../../static/images/tb_search.png" mode=""></image>
				<input type="text" value="" placeholder="请输入关键词..." />
			</view>
			<image src="../../../static/shopImage/1111.png" mode="" class="rightImage"></image>
			<!-- 全部栏 -->
			<view class="all" v-show="Showall">
				<view class="allchidd" @click="type(0)" :class="{ color: color }">1111</view>
				<!-- 	<view class="allchidd"  @click="type(index)" :class="{color:now==index}">
					1111
				</view> -->
			</view>
		</view>

		<view class="swi">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red"><image src="../../../static/images/201916541220.jpg" mode="" /></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green"><image src="../../../static/images/201916541220.jpg" mode="" /></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue"><image src="../../../static/images/201916541220.jpg" mode="" /></view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bo"><uni-notice-bar scrollable="true" single="true" :text="text" backgroundColor="#ffffff" color="#666666" showIcon="true"></uni-notice-bar></view>
		<view class="tap">
			<view class="tapLeft">最近更新</view>
			<view class="tapRight">
				查看更多
				<image src="../../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="shop">
			<view class="shopmall" >
				<image src="../../../static/images/201916541220.jpg" mode=""></image>
				<view class="dress">雪纺连衣裙</view>
				<view class="dressTwo">销量:5427</view>
				<view class="dressTwo">库存:542</view>
				<view class="dressred">¥120.00</view>
				<view class="ding" @click="addCar"><image src="../../../static/shopImage/jia.png" mode=""></image></view>
			</view>
			<view class="shopmall">
				<image src="../../../static/images/201916541220.jpg" mode=""></image>
				<view class="dress">雪纺连衣裙</view>
				<view class="dressTwo">销量:5427</view>
				<view class="dressTwo">库存:542</view>
				<view class="dressred">¥120.00</view>
				<view class="ding"><image src="../../../static/shopImage/jia.png" mode=""></image></view>
			</view>
			<view class="shopmall">
				<image src="../../../static/images/201916541220.jpg" mode=""></image>
				<view class="dress">雪纺连衣裙</view>
				<view class="dressTwo">销量:5427</view>
				<view class="dressTwo">库存:542</view>
				<view class="dressred">¥120.00</view>
				<view class="ding"><image src="../../../static/shopImage/jia.png" mode=""></image></view>
			</view>
		</view>
		<view class="tarbar">
			<view class="one">
				<image src="../../../static/shopImage/1.png" mode=""></image>
				<view class="text">店铺</view>
			</view>
			<view class="one">
				<image src="../../../static/shopImage/2.png" mode=""></image>
				<view class="txt">商品</view>
			</view>
			<view class="one">
				<image src="../../../static/shopImage/car.png" mode=""></image>
				<view class="txt">购物车</view>
				<view class="dian" v-show="dian">1</view>
			</view>
			<view class="one">
				<image src="../../../static/shopImage/4.png" mode=""></image>
				<view class="txt">我的</view>
			</view>
		</view>
			<view class="meng" v-show="meng"></view>
			
			<!-- 添加购物车 -->
			<view class="addCar" v-show="showCar">
				<view class="addCarTop">
					<view class="">
						规格
					</view>
					<view class="">
						单价
					</view>
					<view class="">
						数量
					</view>
				</view>
				<view class="addCarbot">
					<view class="">
						大码/红色
					</view>
					<view class="box">
						¥120.00
					</view>
					<view class="boxB">
						<stepper style="float: right;" size="small" :min="0" :max="20" @change="changeNum"></stepper>
					</view>
				</view>
				<view class="heji">
					<view class="tet">
						合计:<text>¥365</text>
					</view>
					<view class="but">
						加入购物车
					</view>
				</view>
				<view class="cuo" @click="CloseCuo">
					<image src="../../../static/shopImage/cuo.png" mode=""></image>
				</view>
			</view>
	</view>
</template>

<script>
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
	import stepper from '../../../components/stepper/stepper.vue';
export default {
	data() {
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			text: '[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏',
			dian: true,
			color: false,
			now: -1,
			Showall: false,
			meng: false, //蒙层
			ShowMore: false, //更多
			showCar:false,//去购物车
		};
	},
	methods: {
		changeNum(e) {
			console.log(e);
		
		},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots;
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay;
		},
		intervalChange(e) {
			this.interval = e.target.value;
		},
		durationChange(e) {
			this.duration = e.target.value;
		},
		showLan() {
			this.Showall = !this.Showall;
		},

		type() {
			// this.index=this.now
			this.color = !this.color;
		},
		more() {
			(this.meng = true), (this.ShowMore = true);
		},
		Go(){
				(this.meng = false), (this.ShowMore = false);
		},
		addCar(){
			this.meng=true,
			this.showCar=true;
			},
		CloseCuo(){
			this.meng=false,
			this.showCar=false;
		}	
	},
	components: { uniNoticeBar,stepper }
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.head {
	height: 88rpx;
	line-height: 88rpx;
	background-color: #249af6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
position: relative;
	image {
		width: 22rpx;
		height: 39rpx;
		margin-top: 25rpx;
	}
}
.seach {
	position: relative;
	height: 88rpx;
	background-color: #ffffff;
	box-sizing: border-box;
	display: flex;
	image {
		width: 47rpx;
		height: 33rpx;
		margin: 28rpx 32rpx;
	}
	.seach-e {
		flex: 1;
		height: 66rpx;
		border-radius: 9999rpx;
		background-color: #f7f4f8;
		margin-top: 14rpx;
		height: 60rpx;
		box-sizing: border-box;
		display: flex;
		input {
			position: relative;
			top: 10rpx;
		}
		image {
			width: 31rpx;
			height: 28rpx;
			position: relative;
			top: -10rpx;
		}
	}
	.rightImage {
		margin-top: 20rpx;
		width: 44rpx;
		height: 44rpx;
	}
}
.swi {
	width: calc(100%-60rpx);
	height: 300rpx;
	margin: 20rpx 30rpx;
	background-color: #ffffff;
	image {
		width: 100%;
		height: 300rpx;
	}
}
.tap {
	height: 64rpx;
	line-height: 93rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	image {
		width: 19rpx;
		height: 34rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}
	.tapRight {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.shop {
	padding: 0 30rpx;

	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 96rpx;
	.shopmall {
		position: relative;
		margin-top: 30rpx;
		width: 330rpx;
		background-color: #ffffff;
		image {
			width: 330rpx;
			height: 330rpx;
		}
	}
	.dress {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 20rpx;
	}
	.dressTwo {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		margin-left: 20rpx;
		margin-bottom: 10rpx;
	}
	.dressred {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(246, 68, 68, 1);
		margin: 20rpx;
	}
	.ding {
		position: absolute;
		right: 21rpx;
		bottom: 20rpx;
		image {
			width: 45rpx;
			height: 45rpx;
		}
	}
}
.tarbar {
	height: 98rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	background-color: #ffffff;
	.one {
		position: relative;
		image {
			height: 44rpx;
			width: 44rpx;
			margin-top: 11rpx;
		}
		.dian {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			font-size: 22rpx;
			position: absolute;
			color: #ffffff;
			line-height: 30rpx;
			text-align: center;
			top: 0;
			left: 24rpx;
			background-color: #f93c45;
		}
	}
	.text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(247, 110, 117, 1);
	}
	.txt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
.all {
	width: 100%;

	background-color: #ffffff;
	position: absolute;
	bottom: -92rpx;
	z-index: 2;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	.allchidd {
		height: 92rpx;

		line-height: 92rpx;
		text-align: center;
		border-bottom: 2rpx solid #cccccc;
	}
}
.color {
	background-color: #eeeeee;
}
.more {
	height: 230rpx;
	width: 281rpx;
	line-height: 115rpx;
	background-color: #ffffff;
	position: absolute;
	bottom: -230rpx;
	right: 33rpx;
	z-index: 3;
	padding: 0 31rpx;
	box-sizing: border-box;
	border-radius: 10rpx;
	.moreLeft {
		height:50%;
		padding-top: 30rpx;
		box-sizing: border-box;
		border-bottom: 3rpx solid #eeeeee;
		image {
			width: 44rpx;
			height: 44rpx;
			vertical-align: middle;
			margin-right: 26rpx;
			position: relative;
			top: -15rpx;
			text {
				line-height: 110rpx;
			}
		}
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 48rpx;
	}
}
.meng {
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.7;
	position: fixed;
	top: 0;
}

.addCar{
	width: 100%;
	position: relative;
	position: fixed;
	bottom: 0rpx;
	z-index: 2;
	border-radius: 20rpx;
	font-size:30rpx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(102,102,102,1);
	.addCarTop{
		height: 109rpx;
		line-height: 109rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-evenly;
		border-bottom: 2rpx solid #eeeeee;
	}
	.addCarbot{
		height: 109rpx;
		line-height: 109rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-evenly;
		border-bottom: 2rpx solid #eeeeee;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		.box{
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(246,68,68,1);
			position: relative;
			left: 34rpx;
		}
		.boxB{
			margin-top: 32rpx;
			
		}
	}
		
	.heji{
		height: 98rpx;
		background-color: #FFFFFF;
		display: flex;
		.tet{
			flex: 1;
			line-height: 98rpx;
			text-align: center;
			text{
				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(249,60,69,1);
			}
		}
		.but{
			width: 295rpx;
			background-color:#F93C45FF;
			color: #FFFFFF;
			font-size:30rpx;
			text-align: center;
			line-height: 98rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
	}
	.cuo{
		position: absolute;
		top:-160rpx;
	    left: 340rpx;
		image{
			width: 60rpx;
			height: 60rpx;
		}
	}
}
</style>
